<template>
  <view class="todo-item" :class="{ completed: todo.completed }">
    <text class="todo-text">{{ todo.text }}</text>
    <view class="actions">
      <button class="toggle-btn" @click="toggleTodo(todo.id)">
        {{ todo.completed ? '重做' : '完成' }}
      </button>
      <button class="delete-btn" @click="removeTodo(todo.id)">删除</button>
    </view>
  </view>
</template>

<script setup lang="ts">
defineProps<{
  todo: {
    id: number;
    text: string;
    completed: boolean;
  };
}>();

const emit = defineEmits(['toggle', 'remove']);

const toggleTodo = (id: number) => {
  emit('toggle', id);
};

const removeTodo = (id: number) => {
  emit('remove', id);
};
</script>

<style lang="scss">
.todo-item {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 20rpx;
  background: #fff;
  border-bottom: 1px solid #eee;

  &.completed .todo-text {
    text-decoration: line-through;
    color: #999;
  }
}

.actions {
  display: flex;
  gap: 10rpx;
}

.toggle-btn {
  background: #4cd964;
  color: white;
  padding: 8rpx 15rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
}

.delete-btn {
  background: #dd524d;
  color: white;
  padding: 8rpx 15rpx;
  border-radius: 6rpx;
  font-size: 24rpx;
}
</style>
